<!DOCTYPE html>
<html>
<head>
	<style>
table { border-collapse:collapse; margin:8px; background-color:#f8f8f8; }
table td { border:1px solid blue; padding:3px; }
</style>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
 
<button id="showBtn">Show movies</button><br/>
<table><tbody id="movieList"></tbody></table>
<script>
	var movies = [
	{ Name: "The Red Violin", ReleaseYear: "1998", 
			Director: "François Girard" },
	{ Name: "Eyes Wide Shut", ReleaseYear: "1999", 
			Director: "Stanley Kubrick" },
	{ Name: "The Inheritance", ReleaseYear: "1976", 
			Director: "Mauro Bolognini" }
	];
	var markup = "<tr><td colspan='2'>${Name}</td><td>Released: ${ReleaseYear}</td><td>Director: ${Director}</td></tr>"
	/* Compile markup string as a named template */
	$.template( "movieTemplate", markup );
	/* Render the named template */
	$( "#showBtn" ).click( function() {
		$( "#movieList" ).empty();
		$.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );
	});
</script>
</body>
</html>